<template>
  <div class="container">
    <h1>
      <span>生成实验报告</span>
      <div class="printSave">
        <el-button type="text" icon="el-icon-printer" v-print="'#pdfDom'">打印</el-button>
        <el-button type="text" icon="el-icon-s-order" @click="handleDown">保存</el-button>
      </div>
    </h1>
    <div class="content" id="pdfDom">
      <h1 style="border:0;">地层三维建模虚拟仿真实验报告书</h1>
      <p class="big">一、实验目的</p>
      <p style="text-indent: 2em">1.学习、了解地层数字建模基本原理；</p>
      <p style="text-indent: 2em">2.学习、掌握地层数字建模方式、方法和流程；</p>
      <p style="text-indent: 2em">3.学习虚拟仿真现实技术再现、模拟地层结构、特征，掌握数字地层岩性属性查询、形态特征三维分析、地层断面产状判识、层间断距量测等操作；</p>
      <p style="text-indent: 2em">4.提高数字环境下，地层三维模型建立、识读、判断、分析能力。</p>
      <p class="big">二、实验内容</p>
      <p style="text-indent: 2em">1.地层实验系统的基本配置（文件、配置）；</p>
      <p style="text-indent: 2em">2.地层实验系统的基本操作（查询、切块、量测、虚拟钻孔）；</p>
      <p style="text-indent: 2em">3.地层实验系统的基本分析（集成、分析、识读）；</p>
      <p style="text-indent: 2em">4.地层实验系统的实验报告生成。</p>
      <p class="big">三、实验要求</p>
      <p style="text-indent: 2em">1.实验对象：地质学、地质工程、资源勘查工程三个地学专业的大学二年级本科学生；</p>
      <p style="text-indent: 2em">2.实验的基本要求：通过地层三维数字模型实验，能够了解、熟悉并掌握软件的基本操作与方法，完成各项实验内容。</p>
      <p class="big">四、实验操作</p>
      <p style="text-indent: 2em" id="title">
        <strong>
          1、视图导航模块
          <span>20分</span>
        </strong>
        <strong>
          难易程度(&nbsp;
          <span>★&nbsp;★</span>&nbsp;★&nbsp;★&nbsp;★&nbsp;)
        </strong>
      </p>
      <p style="text-indent: 4em">(1)、旋转、平移和缩放</p>
      <p style="text-indent: 6em">操作说明：通过鼠标来控制三维地层模型的旋转、平移、放大和缩小。</p>
      <p style="text-indent: 4em">(2)、视点控制</p>
      <p style="text-indent: 6em">操作说明：实现模型的俯视、平视和斜视间的转换。</p>
      <p style="text-indent: 4em">(3)、第一人称视角</p>
      <p style="text-indent: 6em" id="title">
        <strong style="font-weight: normal;">操作说明：以第一人称视角浏览整个地层模型。</strong>
        <strong>
          本模块您的得分：
          <span>{{getFirstPartScore}}</span>分
        </strong>
      </p>
      <p style="text-indent: 2em" id="title">
        <strong>
          2、模型展示模块
          <span>30分</span>
        </strong>
        <strong>
          难易程度(&nbsp;
          <span>★&nbsp;★&nbsp;★&nbsp;★&nbsp;★&nbsp;</span>)
        </strong>
      </p>
      <p style="text-indent: 4em">(1)、地层模型载入</p>
      <p style="text-indent: 6em">操作说明：前端浏览器载入并展示三维地层模型。</p>
      <p style="text-indent: 4em">(2)、拔高系数</p>
      <p style="text-indent: 6em">操作说明：控制三维地层模型的高度变化。</p>
      <p style="text-indent: 4em">(3)、分层展示</p>
      <p style="text-indent: 6em">操作说明：展示不同地层数的地层模型。</p>
      <p style="text-indent: 4em">(4)、分类展示</p>
      <p style="text-indent: 6em">操作说明：展示不同土地类型的地层模型。</p>
      <p style="text-indent: 4em">(5)、岩性着色</p>
      <p style="text-indent: 6em" id="title">
        <strong style="font-weight: normal;">操作说明：改变各种土地类型的模型颜色。</strong>
        <strong>
          本模块您的得分：
          <span>{{getSecondPartScore}}</span>分
        </strong>
      </p>
      <p style="text-indent: 2em" id="title">
        <strong>
          3、查询量算模块
          <span>20分</span>
        </strong>
        <strong>
          难易程度(&nbsp;
          <span>★&nbsp;★&nbsp;★&nbsp;★&nbsp;</span>★&nbsp;)
        </strong>
      </p>
      <p style="text-indent: 4em">(1)、岩性查询</p>
      <p style="text-indent: 6em">操作说明：查询地层模型的岩性信息和地层信息。</p>
      <p style="text-indent: 4em">(2)、空间距离量算</p>
      <p style="text-indent: 6em" id="title">
        <strong style="font-weight: normal;">操作说明：在地层模型上绘制线段并计算线段的空间距离。</strong>
        <strong>
          本模块您的得分：
          <span>{{getThirdPartScore}}</span>分
        </strong>
      </p>
      <p style="text-indent: 2em" id="title">
        <strong>
          4、地层三维分析模块
          <span>30分</span>
        </strong>
        <strong>
          难易程度(&nbsp;
          <span>★&nbsp;★&nbsp;★&nbsp;★&nbsp;</span>★&nbsp;)
        </strong>
      </p>
      <p style="text-indent: 4em">(1)、虚拟钻孔</p>
      <p style="text-indent: 6em">操作说明：在模型表面选取一点作为钻孔点，生成此钻孔点的钻孔模型。</p>
      <p style="text-indent: 4em">(2)、地层剖面</p>
      <p style="text-indent: 6em">操作说明：生成地层模型的剖面。</p>
      <p style="text-indent: 4em">(3)、地层剖切</p>
      <p style="text-indent: 6em" id="title">
        <strong style="font-weight: normal;">操作说明：将地层模型进行剖切，获取地层切块。</strong>
        <strong>
          本模块您的得分：
          <span>{{getFourPartScore}}</span>分
        </strong>
      </p>
      <p class="total">
        您的总分：
        <strong>{{ getMyScore }}</strong>&nbsp;&nbsp;分
      </p>
    </div>
  </div>
</template>
<script>
import htmlToPdf from "../htmlToPdf";
export default {
  name: "report",
  data() {
    return {
      //htmlTitle: '地层三维建模虚拟仿真实验报告书'
    };
  },
  computed: {
    getMyScore() {
      return this.$store.getters.getScore;
    },
    getFirstPartScore() {
      return this.$store.getters.getFirstScore;
    },
    getSecondPartScore() {
      return this.$store.getters.getSecondScore;
    },
    getThirdPartScore() {
      return this.$store.getters.getThirdScore;
    },
    getFourPartScore() {
      return this.$store.getters.getFourScore;
    }
  },
  methods: {
    // Print(){
    //   this.$print(this.$refs.print);
    // }
    handleDown() {
      htmlToPdf.downloadPDF( document.querySelector('#pdfDom'),'地层三维建模虚拟仿真实验报告书');
      //console.log(1111)
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 10px 0 95px;
  box-sizing: border-box;
  h1 {
    width: 1123px;
    margin: 0 auto 30px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    //margin: 0 0 ;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
    .printSave {
      position: absolute;
      right: 0;
    }
  }
  .content {
    width: 1123px;
    margin: 0 auto;
    padding: 35px 40px 50px;
    background: #fff;
    box-shadow: 0 0 10px #ddd;
    min-height: 550px;
    h1 {
      font-size: 18px;
      color: #333333;
      margin: 15px 0 20px;
      text-align: center;
    }
    .big {
      font-size: 16px;
      font-weight: 700;
    }
    #title {
      display: flex;
      justify-content: space-between;
      span {
        color: red;
      }
    }
    .total {
      text-align: right;
      strong {
        font-size: 18px;
        color: red;
      }
    }
    p {
      line-height: 30px;
      color: #666;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
</style>


